<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--
vim: fenc=cp1250:
-->
<head>
<title>Javascript Map Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<meta name="code source" content="Karel Szkandera [kumor] karel@szkandera.com">
<meta name="description" content="Map viewer, based on Javascript,html, css, bitmap">
<meta name="keywords" content="bitmap javascript map maps viewer html css project open source karel szkandera liberix free code">
<link href="map.css" rel="stylesheet" type="text/css" />


<script language="JavaScript">
//verifyCompatibleBrowser - overeni kompaktibility prohlizece
function verifyCompatibleBrowser(){
  this.ver=navigator.appVersion; //promenna ver- verze prohlizece
  this.dom=document.getElementById?1:0; //promenna dom - umoznuje prohlizec pristupovat k jednotlivym prvkum? (DOM) 
  this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; //vytvoreni promennych pro jednotlive typy prohlizecu
  this.ie4=(document.all && !this.dom)?1:0;
  this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

  this.ns4=(document.layers && !this.dom)?1:0;
  this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5);
  return this;
}
bw=new verifyCompatibleBrowser();

//zalozeni promennych
var speed=0; //promenna urcujici rychlost scrollovani pomoci tlacitek- zmenena v divu id=mmap
var loop, timer; //promenne slouzici k preruseni scrollovani po uvolneni tlacitka mysi 
//(.resp. k pokracovani scrolovani, dokud je tlacitko drzeno)

var startup; //promenna true,false - podariloli se inicializovat mapu
var down=0; //true,false - je stisknute tlacitko mysi
var waschange=0; //true,false - jeli to prvni posun tazenim mysi nebo ne
var scrollx=0; // promenna pro posun mapy pri tazenim mysi - o kolik pixlu se mapa posune v x-ovem smeru
var scrolly=0; //promenna pro posun mapy pri tazenim mysi - o kolik pixlu se mapa posune v y-ovem smeru
var scrollstarx=-1000;
var scrollstarty=-1500;
//fuknce pro vytvoreni objektu, definuje jeho budouci vlasnosti
//pr. jednotlive prohlizece pristupuji k napr.css vlastnostem prvku jinak, diky vytvoreni objektu muzeme nadefinovat stejny pristup
function ConstructObject(obj,nest){
  nest=(!nest) ? '':'document.'+nest+'.';
  this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
  this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;

  this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight;
  this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight;
  this.up=MoveAreaUp;this.down=MoveAreaDown; //vlastnost up zavola funkci MoveAreaUp..

  this.scrollWidth=bw.ns4?this.css.document.width:this.el.offsetWidth;
  this.clipWidth=bw.ns4?this.css.clip.width:this.el.offsetWidth;
  this.left=MoveAreaLeft;this.right=MoveAreaRight;


  this.MoveArea=MoveArea; 
  this.x=0; 
  this.y=0;
  this.obj = obj + "Object";
  eval(this.obj + "=this");
  return this;
}
//funkce MoveArea - slouzi k posouvani mapy, parametry x a y zadavany bud pomoci tlactika nebo z polohy kurosru mysi
function MoveArea(x,y){
  this.x=x;
  this.y=y;
  test();
  this.css.left=this.x;
  this.css.top=this.y;
}
//fuknce pro pohyb urcitym smerem
function MoveAreaDown(move){//smer dolu
  if(this.y>-2500){//posouva se jen po okraj mapy - kdyz je mapa na kraji posouvani nefunguje - pomoci scrollu
    this.MoveArea(this.x,this.y-move); //pokud jeste nejsme na okraji jsou funkci MoveArea predany argumenty pro posun mapy
    scrollx=this.x;
    scrolly=this.y-move;
    if(loop) setTimeout(this.obj+".down("+move+")",speed); //posun pokud je drzeno tlacitko mysi: loop=true
  }
  window.status = "move down" ; //status
}

function MoveAreaUp(move){
  if(this.y<0){
    this.MoveArea(this.x,this.y-move);
    scrollx=this.x;
    scrolly=this.y-move;
    if(loop) setTimeout(this.obj+".up("+move+")",speed);
  }
  window.status = "move up" ;
}

function MoveAreaRight(move){
  if(this.x >-1500){
    this.MoveArea(this.x-move,this.y);
    scrollx=this.x-move;
    scrolly=this.y;
    if(loop) setTimeout(this.obj+".right("+move+")",speed);
  }
  window.status = "move right" ;
}


function MoveAreaLeft(move){
  if(this.x<0){
    this.MoveArea(this.x-move,this.y);
    scrollx=this.x-move;
    scrolly=this.y;    
    if(loop) setTimeout(this.obj+".left("+move+")",speed);
  }
  window.status = "move left";
}

//funkce ktera je zavolana po zmcknuti scrollovaciho tlacitka - argumenty smer a rychlost
function StartScroll(direction,speed){
  if(startup){ //pokud nastaveni pri nacitani stranky probehlo dobre
    loop=true;
    if(direction == 0){ //smer nahoru a dolu=00
      if(speed>0) objMapa.down(speed) //smerem dolu je rychlost(posun) kladna a nahoru je zaporna
      else objMapa.up(speed)
    }
    else {
      if(speed>0) objMapa.right(speed) //smer vlevo a vpravo
      else objMapa.left(speed)  //smerem doprava posun kladny, doleva zaporny
    }
  }
}
//funkce ktera je zaple po uvolneni tlacitka, zastavi posun
function StopScroll(){
  loop=false;
  if(timer) clearTimeout(timer);
}
//funkce, ktera je volana pri nacitani stranky, vytvori objekty a nastavi pocatecni hodnoty.
function StartUpMap(){
  objMapaAll=new ConstructObject('map');
  objMapa=new ConstructObject('mmap','map');
  objMapa.MoveArea(-1000,-1500);
  objMapaAll.css.visibility='visible'; 
  startup=true;
  img(7,5,3,1); //nacte pocatecni obrazky
  img(8,5,3,1);

  
}
var minrad=7; //eplicitni hodnoty- podle pocatecnich obrazku
var minsloup=5;
var maxrad=8;
var maxsloup=7;


//funkce zavolana pri zmacknuti leveho tlacitka mysi na mape
function f_down(event){
  if (navigator.appName=="Microsoft Internet Explorer" || navigator.appName=="Opera"){
    startx=window.event.x; //vezme aktualni pozici mysi
    starty=window.event.y;
  }
  if (navigator.appName=="Netscape"){
    startx=event.screenX; //to same, pro prohlizec Netscape
    starty=event.screenY;
  } 
 
  down = 1; //zaregistruje ze bylo zmacknuto tlacitko
  
  if (waschange==0) {//pokud to je prvni posun tazenim mysi
    scrollstartx = -1000 - scrollx; //nacte do promennych scrollstartx [y], aktualni rohove souradnice mapy
    scrollstarty = -1500 - scrolly;    //neboli k puvodnim rohovym souradnicim pricte zmeny z posouvanim scrollem
  }
  else { //pokud to neni prvni tazenim mysi
    scrollstartx = scrollx; //vezme souradnice rohu z posledniho tazeni a pricte knim zmeny z posouvani scrollem
    scrollstarty = scrolly;
  }

}
//funkce pro tazeni
function f_move(event){
  if (down==1) //pokud bylo zmackle tlacitko mysi nad mapou
 
  {
    if (navigator.appName=="Microsoft Internet Explorer" || navigator.appName=="Opera"){
      gox=window.event.x;  //nacteme aktualni souradnice do promennych gox [y]
      goy=window.event.y;
    }   
    if (navigator.appName=="Netscape"){
      gox=event.screenX; //netscape
      goy=event.screenY;
    }
   
    changex=gox-startx;  //promenna changex [y] vyjadruje zmenu aktualni pozice
    changey=goy-starty; 
    scrollx=scrollstartx + changex; //zmena pozice je prictena k rohovym souradnicim mapy - nove rohove souradnice
    scrolly=scrollstarty + changey;
    if (scrolly < -2500) { //pokud je y-ova rohohava souradnice mensi nez - 2500 (rozmer viditelne casti je 500, obrazky jsou na vysku 12*250.. krajni mez je tedy -2500)
      objMapa.MoveArea(scrollx,-2500); //tak ji nastavi na -2500 =>  melze se posouvat za okraj mapy
      scrolly=-2500;
      }
    else if (scrolly >0) { 
      objMapa.MoveArea(scrollx,0);
      scrolly=0;
    }  
    else if (scrollx <-1500) { //pokud je y-ova rohohava souradnice mensi nez - 1500 (rozmer viditelne casti je 750, obrazky jsou na sirku 9*250.. krajni mez je tedy -1500)
      objMapa.MoveArea(-1500,scrolly); //tak ji nastavi na -1500 => nelze se posouvat za okraj mapy
      scrollx=-1500;
    }
    else if (scrollx > 0){ 
      objMapa.MoveArea(0,scrolly);
      scrollx=0;
    }
    else objMapa.MoveArea(scrollx,scrolly); 
  }  
}
//funkce volana pri uvolneni stisku tlacitka, nebo opusteni mapy pri tazeni
function f_up(event){
  if (down=1){ //pokud byla mapa opustena pri tazeni mysi, nebo bylo uvolneno tlacitko mysi
    waschange=1; // nastavi se waschange na true a je zaregistrovano ze bylo tlacitko uvolneno down=0
  }
  down = 0; //pokud byla mapa opustena aniz by probihalo tazeni mysi, hodnota waschange je nezmenena

}
function refresh() { //obnovi na pocatecni stav, jako po refreshi
  minrad=7; //eplicitni hodnoty- podle pocatecnich obrazku
  minsloup=5;
  maxrad=8;
  maxsloup=7;
  img(7,5,3,1); //nacte pocatecni obrazky
  img(8,5,3,1);
  
  objMapa.MoveArea(-1000,-1500);
  down=0; 
  waschange=0; 
  scrollstartx=-1000; 
  scrollstarty=-1500;
  scrollx=0;
  scrolly=0;
  minrad=7; //eplicitni hodnoty- podle pocatecnich obrazku
  minsloup=5;
  maxrad=8;
  maxsloup=7;
}

//pokusssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

function test(){ //fuknce, pro zjisteni zda je potreba nacist nove obrazky, popripade smazat stare..
  if ((scrollx)>=(-((minsloup-1)*250))){ //pokud semapa posouva doprava a vnikne vlevo prazdne misto
    if (minsloup>1) { //a pokud to neni uplne na kraji mapy
      img(minrad,(minsloup-1),3,0); //nactou se vlevo nove obrazky parametry funkce img popsany u funkce img 
      if ((maxsloup-minsloup) > 3){ //a pokud celkova sire obrazku na radku je pres 1000 smaze se pravy sloupec 
        img_minus(1,maxsloup,12,0);
      }
    }  
  }
  if ((scrolly)>=(-((minrad-1)*250))){//pokud semapa posouva dolu a vnikne nahore prazdne misto
    if (minrad>1) {
      img((minrad-1),minsloup,4,1);
      if ((maxrad-minrad) > 2){
        img_minus(maxrad,1,9,1);
      }
    }    
  }
  if ((750+(-scrollx))>=(((maxsloup)*250))){//pokud semapa posouva doleva a vnikne vpravo prazdne misto
    if (maxsloup<9) {
      img(minrad,(maxsloup+1),3,0);
      if ((maxsloup-minsloup) > 3) {
        img_minus(1,minsloup,12,0);
      }
    }
  }
  if ((500+(-scrolly))>=(((maxrad)*250))){//pokud semapa posouva nahoru a vnikne dole prazdne misto
    if (maxrad<12) {  
      img((maxrad+1),minsloup,4,1);
      if ((maxrad-minrad) > 2) {
        img_minus(minrad,1,9,1);
      }
    }
  }  
}
/*
img_minus(radek, sloupec, poc, smer) ........funkce pro mazani obrazku
radek-oznacuje na kterem radku je obrazek od ktereho se zacne mazat
sloupec-oznacuje ve kterem sloupci je obrazek od ktereho se zacne mazat
  napr.3_1.png - obrazek je ve 3. radku a 1. sloupci
poc-pocet obrazku ktere se maji mazat- vzdy cely sloupec(v tomto pripade 12) nebo radu (v tomto pripade 9)
smer - zda se maze radek (1) nebo sloupec (0)
*/


function img_minus (radek, sloupec,poc, smer){
    for (i=1; i <= poc; i++) {
      if (smer==0) {
          if (document.getElementById(""+(radek+i-1)+"_"+sloupec)){ //pokud obrazek existuje
            document.getElementById(""+(radek+i-1)+"_"+sloupec).parentNode.removeChild(document.getElementById(""+(radek+i-1)+"_"+sloupec));//smaze se
            if (sloupec == minsloup) minsloup=sloupec+1; //prenastavi hodnotu nejmensiho sloupce
            if (sloupec == maxsloup) maxsloup=sloupec-1; //maximalniho sloupce
          }
      }
      else {
          if (document.getElementById(""+radek+"_"+(sloupec+i-1))){
            document.getElementById(""+radek+"_"+(sloupec+i-1)).parentNode.removeChild(document.getElementById(""+radek+"_"+(sloupec+i-1)));
            if (radek == minrad) minrad=radek+1;
            if (radek == maxrad) maxrad=radek-1;
          }
      }
    }    
}
/*
img(radek, sloupec, poce, smer) ........funkce pro nahrani obrazku
radek-oznacuje na kterem radku ma byt obrazek od ktereho se zacnou vytvaret
sloupec-oznacuje ve kterem sloupci ma byt obrazek od ktereho se zacnou vytvaret
  napr.3_1.png - obrazek je ve 3. radku a 1. sloupci
poc-pocet obrazku ktere se maji vytvorit- aby vzdy vyplnily mapu - na radku 5 ve sloupci 3
smer - zda se vytvari radek (1) nebo sloupec (0)
*/
function img(radek, sloupec, pocet, smer){
    for (i=1; i <= pocet; i++) {
      
      newImg = document.createElement('img'); //vytvori obrazek
      
      if (smer==0) {//pro smer dolu
        newImg.src="./public_map/"+(radek+i-1)+"_"+sloupec+".png";//nastavi cestu
        newImg.name=""+(radek+i-1)+"_"+sloupec;//jmeno
        newImg.id=""+(radek+i-1)+"_"+sloupec;//id
        newImg.alt=""+(radek+i-1)+"_"+sloupec;//alt
        newImg.style.position="absolute";//pozici
        newImg.style.top=""+((radek+i-2)*250);//pozici top a left
        newImg.style.left=""+((sloupec-1)*250);
        document.getElementById('mmap').appendChild(newImg);//prida obrazek s urcenymi parametry
        if (radek < minrad) minrad=radek;//opravi hodnoty maximalnich a minimalnich radku a sloupcu, pokud to je treba
        if ((radek+i-1) > maxrad) maxrad=(radek+i-1);
        if (sloupec < minsloup) minsloup=sloupec;
        if (sloupec > maxsloup) maxsloup=sloupec; 
      }
      else {//pro vodorovny smer
        newImg.src="./public_map/"+radek+"_"+(sloupec+i-1)+".png";
        newImg.name=""+radek+"_"+(sloupec+i-1);
        newImg.id=""+radek+"_"+(sloupec+i-1);
        newImg.alt=""+radek+"_"+(sloupec+i-1);
        newImg.style.position="absolute";
        newImg.style.top=""+((radek-1)*250);
        newImg.style.left=""+((sloupec+i-2)*250);
        document.getElementById('mmap').appendChild(newImg); 
        if (radek < minrad) minrad=radek;
        if (radek > maxrad) maxrad=radek;
        if (sloupec < minsloup) minsloup=sloupec;
        if ((sloupec+i-1) > maxsloup) maxsloup=(sloupec+i-1); 
      }
    }
}

</script>






</head>

<body onLoad="StartUpMap()">
  <div id="scrollbuttons">
    <img id="s" src="./sipky/sever.gif" alt="sever" title="jdi na sever" onmousedown = "StartScroll(0,-10)" onmouseup = "StopScroll()"/>
    <img id="z" src="./sipky/zapad.gif" alt="zapad" title="jdi na zapad"  onmousedown = "StartScroll(1,-10)" onmouseup = "StopScroll()"/>
    <img id="v" src="./sipky/vychod.gif" alt="vychod" title="jdi na vychod"  onmousedown = "StartScroll(1,10)" onmouseup = "StopScroll()"/>
    <img id="j" src="./sipky/jih.gif" alt="jih" title="jdi na jih" onmousedown = "StartScroll(0,10)" onmouseup = "StopScroll()"/>
    <img id="c" src="./sipky/stred.gif" alt="pocatek" title="pocatecni stav"  onclick = "refresh()" />
  </div>

  <div id="map"  onmouseout= "f_up(event)" >
    <div id="mmap"  onmousedown = "f_down(event)" onmousemove= "f_move(event)" onmouseup = "f_up(event)" /> 
    </div>
  </div>
  <img id="nahled" src="./public_map/europe_ref.png" alt="nahled mapy" title="nahled mapy" />
  <div id=about_map><p>(c) Karel Szkandera, distribuded under <a href="LICENSE">Apache License</a></p>
	<p>The map is taken from <a href="http://www.lib.utexas.edu/maps/europe/europe_ref_2006.pdf">University in Texas public domain map repository</a>.</p></div>
</body>
</html>
